<template>
  <!--- 检修报备 -->
  <view>
    <view class="container">
      <uni-forms ref="form" :model="formData" labelWidth="120px" labelPosition="top">
        <view class="hidden-title">检修需求</view>
        <view class="background-white">
          <uni-forms-item name="examineName" label="检修项目" required="">
            <uni-easyinput
              type="textarea"
              v-model="formData.examineName"
              placeholder="请输入检修项目"
              maxlength="50"
            ></uni-easyinput>
          </uni-forms-item>
        </view>
        <cu-cell-group class="bor-top">
          <uni-forms-item name="examineType">
            <cu-cell
              title="检修类型"
              required
              link
              placeholder="请选择"
              :description="typeLabel"
              @click="typeClick()"
            ></cu-cell>
          </uni-forms-item>
          <!-- <uni-forms-item name="examineLevel">
						<cu-cell title="检修级别" required link placeholder="请选择" :description="levelLabel"
							@click="levelClick()"></cu-cell>
					</uni-forms-item> -->
          <uni-forms-item name="deviceGroupId">
            <cu-cell
              title="设备分组"
              required
              link
              placeholder="请选择"
              :description="deviceGroupLabel"
              @click="deviceGroupClick()"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="deviceTypeId">
            <cu-cell
              title="设备类型"
              required
              link
              placeholder="请选择"
              :description="deviceTypeLabel"
              @click="deviceTypeClick()"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="deviceId">
            <cu-cell
              title="设备名称"
              required
              link
              placeholder="请选择"
              :description="deviceNameLabel"
              @click="deviceNameClick()"
            ></cu-cell>
          </uni-forms-item>
          <!-- <uni-forms-item name="examineDeptId">
						<cu-cell title="检修部门" required link placeholder="请选择" :description="deptLabel"
							@click="deptClick()"></cu-cell>
					</uni-forms-item>
					<uni-forms-item name="examineAuth">
						<cu-cell title="检修负责人" required link placeholder="请选择" :description="authLabel"
							@click="userClick()"></cu-cell>
					</uni-forms-item> -->
        </cu-cell-group>

        <view class="background-white bor-top">
          <uni-forms-item name="examineContent" label="检修内容">
            <uni-easyinput
              type="textarea"
              v-model="formData.examineContent"
              placeholder="请输入检修内容"
              maxlength="100"
            ></uni-easyinput>
          </uni-forms-item>
          <uni-forms-item name="faultMsg" label="故障情况和故障原因" labelWidth="200px">
            <uni-easyinput
              type="textarea"
              v-model="formData.faultMsg"
              placeholder="请输入故障情况和故障原因"
              maxlength="100"
            ></uni-easyinput>
          </uni-forms-item>
          <!-- <uni-forms-item name="faultReason" label="故障原因">
						<uni-easyinput type="textarea" v-model="formData.faultReason" placeholder="请输入故障原因"
							maxlength="100"></uni-easyinput>
					</uni-forms-item> -->
        </view>
        <view class="flex justify-between items-center pr-30">
          <view class="hidden-title">所需备件</view>
          <view class="flex items-center blue" style="cursor: pointer" @click="plusRow">
            <image class="icon-style" src="/static/images/icon-add.png" mode="aspectFill"></image>
            添加
          </view>
        </view>
        <view class="background-white bor-top">
          <template v-for="(item, index) in formData.examineRepairs">
            <uni-forms-item
              label="备件名称"
              :key="item.id"
              :rules="[{ required: true, errorMessage: '备件名称必填' }]"
              :name="['examineRepairs', index, 'repairsName']"
            >
              <view class="form-item">
                <uni-easyinput v-model="formData.examineRepairs[index].repairsName" placeholder="请输入备件名称" />
              </view>
            </uni-forms-item>
            <uni-forms-item
              label="备件数量"
              :key="item.id"
              :rules="[
                { required: true, format: 'number', errorMessage: '备件数量只能输入数字' },
                { validateFunction: validatePart }
              ]"
              :name="['examineRepairs', index, 'repairsNum']"
            >
              <view class="form-item">
                <uni-easyinput
                  @input="numberInput"
                  v-model="formData.examineRepairs[index].repairsNum"
                  placeholder="请输入备件数量"
                />
              </view>
            </uni-forms-item>
          </template>
        </view>
      </uni-forms>

      <dict-picker ref="typeDict" title="检修类型" dictType="dfm_device_examine_type" @confirm="typeConfirm">
      </dict-picker>
      <!-- <dict-picker ref="levelDict" title="检修级别" dictType="dfm_device_examine_level" @confirm="levelConfirm">
			</dict-picker> -->
      <dict-picker ref="deviceGroupDict" title="设备分组" dictType="dfm_device_grouping" @confirm="deviceGroupConfirm">
      </dict-picker>
      <device-type ref="deviceType" title="设备类型" @confirm="deviceTypeConfirm"> </device-type>
      <device-name
        ref="deviceName"
        title="设备名称"
        :deviceGroupId="formData.deviceGroupId"
        :deviceTypeId="formData.deviceTypeId"
        @confirm="deviceNameConfirm"
      >
      </device-name>
      <!-- 	<dept-selector ref="deptDict" title="检修部门" @change="deptConfirm">
			</dept-selector>
			<user-selector ref="userDict" title="检修负责人" @change="userConfirm">
			</user-selector> -->
    </view>

    <view class="submit-group">
      <button class="u-button" :ripple="true" @click="submit">重新报备</button>
    </view>
  </view>
</template>

<script>
import { report } from '@/api/dbd/hiddenDangerReport.js'

import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import DictPicker from '@/components/dict-picker/index.vue'
import DeptSelector from '@/components/dept-selector/index.vue'
import UserSelector from '@/components/user-selector/index.vue'
import DeviceType from '@/components/device-type/index.vue'
import DeviceName from '@/components/device-name/index.vue'
import DataPicker from '@/components/data-picker/index.vue'
import ImageUpload from '@/components/image-upload/index.vue'
import { queryInfoV2, updateItem } from '../../../../api/repair/repair'
import ManagerLevelPicker from '../../components/ManagerLevelPicker.vue'
import { completeCheck } from '@/api/dbd/hiddenDangerCheck.js'
import { addItem } from '@/api/repair/repair.js'
export default {
  components: {
    CuCellGroup,
    CuCell,
    DictPicker,
    DeptSelector,
    UserSelector,
    DeviceType,
    DeviceName,
    DataPicker,
    ImageUpload,
    ManagerLevelPicker
  },
  data() {
    return {
      formData: {
        //检修项目
        examineName: '',
        //检修类型
        examineType: '',
        // //检修级别
        // examineLevel: "",
        //设备分组
        deviceGroupId: '',
        //设备类型
        deviceTypeId: '',
        //设备名称
        deviceId: '',
        // // 检修部门
        // examineDeptId: "",
        // // 检修负责人
        // examineAuth: "",
        // 检修内容
        examineContent: '',
        // 故障情况
        faultMsg: null,
        // 故障原因
        faultReason: null,
        examineRepairs: []
      },
      rules: {
        examineName: {
          rules: [
            {
              required: true,
              errorMessage: '检修项目不能为空'
            }
          ]
        },
        examineType: {
          rules: [
            {
              required: true,
              errorMessage: '检修类型不能为空'
            }
          ]
        },
        examineLevel: {
          rules: [
            {
              required: true,
              errorMessage: '检修级别不能为空'
            }
          ]
        },
        deviceGroupId: {
          rules: [
            {
              required: true,
              errorMessage: '设备分组不能为空'
            }
          ]
        },
        deviceTypeId: {
          rules: [
            {
              required: true,
              errorMessage: '设备类型不能为空'
            }
          ]
        },
        deviceId: {
          rules: [
            {
              required: true,
              errorMessage: '设备名称不能为空'
            }
          ]
        },
        examineDeptId: {
          rules: [
            {
              required: true,
              errorMessage: '检修部门不能为空'
            }
          ]
        },
        examineAuth: {
          rules: [
            {
              required: true,
              errorMessage: '检修负责人不能为空'
            }
          ]
        },
        examineContent: {
          rules: [
            {
              required: true,
              errorMessage: '检修内容不能为空'
            }
          ]
        }
      },

      typeLabel: '',
      levelLabel: '',
      deviceGroupLabel: '',
      deviceTypeLabel: '',
      deviceNameLabel: '',
      deptLabel: '',
      authLabel: ''
    }
    wrong: false
  },
  onLoad(option) {
    this.id = option.id
    this.detail(option.id)
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  beforeDestroy() {},
  methods: {
    validatePart(rule, value, data, callback) {
      // console.log('rule', rule)
      // console.log('v', value)
      if (isNaN(value)) return callback('请输入数字')
      else return value > 9999999999 ? callback('超出最大值') : true
    },
    numberInput(v) {
      // console.log('vv', v)
      var r = /(^[1-9]([0-9]*)$|^[0-9]$)/
      let str = String(v)
      // console.log('str', str)
      // console.log('test', r.test(v))
      if (!r.test(str)) {
        this.wrong = true
        this.$modal.showToast('请输入正确的数量值')
      } else {
        this.wrong = false
      }
    },
    plusRow() {
      let row = {
        repairsName: '',
        repairsNum: ''
      }
      this.formData.examineRepairs.push(row)
    },
    navigateBack() {
      uni.navigateBack()
    },
    typeClick() {
      this.$refs.typeDict.open()
    },
    typeConfirm(obj) {
      this.typeLabel = obj.name
      this.formData.examineType = obj.value
    },
    levelClick() {
      this.$refs.levelDict.open()
    },
    levelConfirm(obj) {
      this.levelLabel = obj.name
      this.formData.examineLevel = obj.value
    },
    deviceGroupClick() {
      this.$refs.deviceGroupDict.open()
    },
    deviceGroupConfirm(obj) {
      this.deviceGroupLabel = obj.name
      this.formData.deviceGroupId = obj.value
    },
    deviceTypeClick() {
      this.$refs.deviceType.open()
    },
    deviceTypeConfirm(obj) {
      this.deviceTypeLabel = obj.name
      this.formData.deviceTypeId = obj.value
    },
    deviceNameClick() {
      this.$refs.deviceName.open()
    },
    deviceNameConfirm(obj) {
      this.deviceNameLabel = obj.name
      this.formData.deviceId = obj.value
    },
    deptClick() {
      this.$refs.deptDict.open()
    },
    deptConfirm(obj) {
      this.deptLabel = obj.name
      this.formData.examineDeptId = obj.value
    },
    userClick() {
      this.$refs.userDict.open()
    },
    userConfirm(obj) {
      this.authLabel = obj.name
      this.formData.examineAuth = obj.value
    },
    submit() {
      // this.formData.deviceExaminePartsEntityList = this.formData.deviceExaminePartsEntityList.filter(row=>{
      // 	return row.partName && row.partNum
      // })
      this.$refs.form.validate().then((res) => {
        if (this.wrong) {
          this.$modal.showToast('请输入正确的数字')
        } else {
          updateItem(this.formData).then((res) => {
            this.$modal.showToast('上报成功')
            uni.navigateBack()
          })
        }
      })
    },
    detail(id) {
      queryInfoV2(id).then((res) => {
        this.formData.examineId = this.id
        // 检修项目
        this.formData.examineName = res.data.examineName
        // 检修类型
        this.formData.examineType = res.data.examineType
        this.typeLabel = res.data.examineTypeLabel
        // 检修级别
        // this.formData.examineLevel = res.data.examineLevel
        // this.levelLabel = res.data.examineLevelLabel
        //设备分组
        this.formData.deviceGroupId = res.data.deviceGroupId
        this.deviceGroupLabel = res.data.deviceGroupLabel
        //设备类型
        this.formData.deviceTypeId = res.data.deviceTypeId
        this.deviceTypeLabel = res.data.deviceTypeLabel
        //设备名称
        this.formData.deviceId = res.data.deviceId
        this.deviceNameLabel = res.data.deviceName
        // 检修部门
        // this.formData.examineDeptId = res.data.examineDeptId
        // this.deptLabel = res.data.examineDeptName
        // // 检修负责人
        // this.formData.examineAuth = res.data.examineAuth
        // this.authLabel = res.data.examineAuthLabel
        // 检修内容
        this.formData.examineContent = res.data.examineContent
        // 故障情况
        this.formData.faultMsg = res.data.faultMsg
        // 故障原因
        // this.formData.faultReason = res.data.faultReason
        this.formData.examineRepairs = res.data.examineRepairs
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  margin-bottom: 200rpx;

  .background-white {
    background-color: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .uni-forms-item__label {
      color: #333;
      font-size: 30rpx;
    }

    .bor-btm {
      display: flex;
      border-bottom: 1px solid #d5d7e3;
    }

    .photo {
      display: flex;
      justify-content: space-between;

      image {
        width: 214rpx;
        height: 214rpx;
      }
    }

    .text {
      padding-bottom: 20rpx;
      padding-top: 4rpx;
      color: #333;

      text {
        color: #666;
      }
    }
  }
}

.hidden-title {
  background: #f5f5f5;
  padding: 20rpx;
  color: #999;
}

.bor-top {
  border-top: 20rpx solid #f5f5f5;
}

.blue {
  color: #88b4c4;
}

.icon-style {
  width: 52rpx;
  height: 42rpx;
  padding-right: 10rpx;
}

.input {
  display: inline-block;
  width: 100%;
  background-color: #f5f5f5;
  padding: 20rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  height: 60rpx;
}
</style>
